<template>
  <div>
    <button type="button" @click="getUserList">用户列表</button>
    <button type="button" @click="addUser">添加用户</button>
    <button type="button" @click="delUser">删除用户</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "Axios",
  data() {
    return {
      userForm:{
        username:"wuyanzu",
        nickname:"吴彦祖",
        status:1,
        avatar:"aaa.png"
      }
    }
  },
  methods:{
    getUserList(){
      /*
      * 两个请求的请求协议，端口和主机(域名或IP)有任意一个不同，那么就会产生跨域。
      *
      * */
      // axios.get('http://pang66733.xicp.net/maven_war_exploded/user/page');
      axios.get('http://localhost:8080/maven_war_exploded/user/page',{params:{
          page:1,
          limit:5
        }}).then(({data})=> {
          console.log("请求成功",data);
      }).catch(err=>{
        console.log("请求失败",err);
      });
    },
    addUser(){
      axios.post('http://localhost:8080/maven_war_exploded/user/add',this.userForm).then(({data})=>{
        console.log(data)
      })
    },
    delUser(){
      axios.delete('http://localhost:8080/maven_war_exploded/user/delete/17').then(({data})=>{
        console.log(data)
      })
    }
  }
}
</script>

<style scoped>

</style>
